<template>
  <div class="page-container" v-global-loading="loading">
    <div class="page-card-container">
      <a-form :model="pageSet" layout="inline">
        <a-form-item label="标签名称">
          <a-input
            v-model:value="pageSet.name"
            style="width: 170px"
            :allowClear="true"
          ></a-input>
        </a-form-item>
        <a-form-item label="标签类型">
          <a-select v-model:value="pageSet.tagType" style="width: 130px">
            <a-select-option :value="1" title="会员标签"
              >会员标签</a-select-option
            >
            <a-select-option :value="2" title="商品标签"
              >商品标签</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-warning" @click="loadPagination(true)">
            查询
          </div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="addFormData(1)">新建</div>
        </a-form-item>
        <a-form-item label="">
          <div class="commonBtn-primary" @click="reset">重置</div>
        </a-form-item>
      </a-form>
      <a-table
        size="small"
        :loading="tableLoading"
        :dataSource="tableData"
        :columns="columns"
        bordered
        :pagination="false"
        :scroll="{
          x: 1200,
          y: useAppStore.pageCommonInfo.canUseHeight - 36 + 'px'
        }"
      >
        <template #bodyCell="{text, record, index, column}">
          <template v-if="column.title == '操作'">
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="compile(1, record.id)"
              >编辑</span
            >
            <span
              class="pointer c-primaryColor"
              onselectstart="return false"
              @click="compile(2, record.id)"
              >&nbsp;&nbsp;删除</span
            >
          </template>
          <template v-if="column.title == '背景图'">
            <div
              class="pointer"
              v-if="text"
              @click="
                () => {
                  setVisible(true, index);
                }
              "
            >
              <img :src="text" alt="" style="height: 30px" />
              <a-image
                :width="0"
                :style="{display: 'none'}"
                :preview="{
                  visible: visibleImg[index],
                  onVisibleChange: (e) => {
                    setVisible(e, index);
                  }
                }"
                :src="text"
              />
            </div>
          </template>
        </template>
      </a-table>
      <Pagination
        :pageSet="pageSet"
        style="margin-top: 10px"
        :loadPagination="loadPagination"
      ></Pagination>
      <a-modal
        v-model:open="visible"
        width="500px"
        :title="title"
        :footer="null"
        :maskClosable="false"
        @cancel="addFormData(2)"
      >
        <div v-global-loading="modalloading">
          <a-form :model="form" ref="formRef" :labelCol="{span: 5}">
            <a-form-item
              label="名称"
              name="name"
              :rules="[{required: true, message: '请填写'}]"
            >
              <a-input v-model:value="form.name" />
            </a-form-item>
            <a-form-item
              label="标签类型"
              name="tagType"
              :rules="[{required: true, message: '请填写'}]"
            >
              <a-select v-model:value="form.tagType" allowClear>
                <a-select-option :value="1">会员</a-select-option>
                <a-select-option :value="2">商品</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="背景图" name="backgroundImg">
              <div
                style="
                  width: 100px;
                  height: 100px;
                  border: 1px solid rgb(211, 211, 211);
                  border-radius: 10px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  cursor: pointer;
                "
                v-if="!form.backgroundImg"
                @click="upload"
              >
                <CloudUploadOutlined
                  style="color: rgb(214, 208, 208); font-size: 60px"
                />
              </div>
              <img
                :src="form.backgroundImg"
                @click="upload"
                style="height: 100px; max-width: 350px; cursor: pointer"
                alt=""
                v-else
              />
            </a-form-item>
          </a-form>
          <div style="display: flex; justify-content: end">
            <a-button style="margin-right: 14px" @click="addFormData(2)"
              >取消</a-button
            >
            <a-button type="primary" @click="addFormData(3)">确定</a-button>
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, inject, onActivated, onMounted} from "vue";
import Pagination from "@/components/pagination/Pagination.vue";
import useAppStore from "@/store/app";
import {trigerUpload, trigerUploadObs} from "@/utils/common";
import {
  tagsInfoPage,
  tagsInfoCreate,
  tagsInfoUpdate,
  tagsInfoChangeStatus,
  tagsInfoDelete,
  tagsInfoDetail,
  tagsInfoList
} from "@/api/customerArchives/memberTag";
import {message, Modal} from "ant-design-vue";
//重置
const reset = () => {
  pageSet.value = {
    pageNo: 1,
    pageSize: 20,
    total: 0
  };
  loadPagination();
};
const calcCanUseHeight: any = inject("calcCanUseHeight");
onActivated(() => {
  calcCanUseHeight();
});
onMounted(() => {
  calcCanUseHeight();
});
const visibleImg = ref<any>([]);
const setVisible = (flag, index) => {
  visibleImg.value[index] = flag;
};
const upload = async () => {
  const fileInfo: any = await trigerUpload();
  let files = fileInfo.target.files[0];
  if (
    files.type == "image/jpeg" ||
    files.type == "image/png" ||
    files.type == "image/jpg"
  ) {
    modalloading.value = true;
    trigerUploadObs(fileInfo)
      .then((res) => {
        form.value.backgroundImg = res;
      })
      .finally(() => {
        modalloading.value = false;
      });
  } else {
    message.error("请上传jpeg、png、jpg类型的图片");
  }
};
const visible = ref<boolean>(false);
const title = ref<string>("新建");
const form = ref<any>({});
const modalloading = ref<boolean>(false);
const loading = ref(false);
const formRef = ref();
const pageSet = ref<any>({
  pageNo: 1,
  pageSize: 20,
  total: 0
});
const tableLoading = ref<boolean>(false);
const tableData = ref<Array<object>>([]);
//获取数据
const loadPagination = (flag?: boolean): void => {
  if (flag) {
    pageSet.value.pageNo = 1;
  }
  tableLoading.value = true;
  tagsInfoPage(pageSet.value)
    .then((res) => {
      tableData.value = res.data.rows;
      pageSet.value.total = res.data.totalRows;
    })
    .finally(() => {
      tableLoading.value = false;
    });
};
loadPagination(true);
//操作
const compile = (
  type: number,
  id: number | string,
  status?: number | string
) => {
  if (type == 1) {
    //编辑
    loading.value = true;
    tagsInfoDetail({id})
      .then((res) => {
        form.value = res.data;
        visible.value = true;
        title.value = "编辑";
      })
      .finally(() => {
        loading.value = false;
      });
  } else if (type == 2) {
    //删除
    Modal.confirm({
      title: "确定要删除该数据嘛",
      onOk() {
        loading.value = true;
        tagsInfoDelete({id})
          .then((res) => {
            message.success("删除成功!");
            loadPagination(true);
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  } else if (type == 3) {
    //修改状态
    let formData: any = {};
    formData.id = id;
    loading.value = true;
    tagsInfoChangeStatus(formData)
      .then(() => {
        message.success("修改成功");
        loadPagination();
      })
      .finally(() => {
        loading.value = false;
      });
  }
};

const addFormData = (type: number): void => {
  if (type == 1) {
    //新建
    title.value = "新建";
    form.value = {};
    visible.value = true;
  } else if (type == 2) {
    //关闭弹窗
    formRef.value.clearValidate();
    visible.value = false;
  } else if (type == 3) {
    //创建 修改
    formRef.value.validate().then(() => {
      modalloading.value = true;
      let formData = JSON.parse(JSON.stringify(form.value));
      if (formData.id) {
        tagsInfoUpdate(formData)
          .then(() => {
            message.success("修改成功");
            visible.value = false;
            loadPagination();
          })
          .finally(() => {
            modalloading.value = false;
          });
      } else {
        tagsInfoCreate(formData)
          .then(() => {
            message.success("创建成功");
            visible.value = false;
            loadPagination();
          })
          .finally(() => {
            modalloading.value = false;
          });
      }
    });
  }
};
const columns = ref<Array<object>>([
  {
    title: "序号",
    dataIndex: "name",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "名称",
    dataIndex: "name",
    align: "center",
    width: 200
  },
  {
    title: "背景图",
    dataIndex: "backgroundImg",
    align: "center",
    width: 120
  },
  {
    title: "标签类型",
    dataIndex: "tagType",
    align: "center",
    width: 200,
    customRender: ({text}) => {
      return text == 1 ? "会员" : "商品";
    }
  },
  {
    title: "操作",
    dataIndex: "e",
    align: "center",
    width: 120,
    fixed: "right"
  }
]);
</script>

<style lang="less" scoped></style>
